<template>
	<x-border title="分润测试" desc="快速测试分润规则" type="light" icon="icon-5333-icon36">
		<div class="admin-reward-test">
			<el-alert title="分润规则测试" type="success" show-icon :closable="false" description="快速测试分润规则,可以通过此功能来调试分润规则,测试结果不会保存到数据库，不会影响会员的资产,请放心使用……">
			</el-alert>
			<el-form ref="form" :model="form">
				<el-form-item label="测试维度" required>
					<el-select v-model="form.ruleId" placeholder="测试维度">
						<el-option v-for="(sItem,sIndex) in selectList" :key="sIndex" :label="sItem.base.name" :value="sItem.id" v-show="sItem.base.isEnable"></el-option>
					</el-select>
					<div class="demo_intro">选择您需要测试的维度,测试维度状态需要为正常</div>
				</el-form-item>
				<el-form-item label="分润订单" required>
					<el-select v-model="form.shareOrderId" placeholder="测试维度">
						<el-option v-for="(sItem,sIndex) in orderList" :key="sIndex" :label='sItem.serial' :value="sItem.id" ></el-option>
					</el-select>
					<div class="demo_intro">选择您需要测试的维度,测试维度状态需要为正常</div>
				</el-form-item>
				<el-form-item label=" ">
					<el-button type="primary" @click="onSubmit">测试</el-button>
				</el-form-item>
			</el-form>
			<div v-if="tableFool">
				<x-line :border="true" title="测试结果"></x-line>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="订单用户" width="140">
						<template slot-scope="scope">
							<span>{{ scope.row.orderUserName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="分润分类" width="100">
						<template slot-scope="scope">
							<span>{{ scope.row.configName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="配置名称" width="200">
						<template slot-scope="scope">
							<span>{{ scope.row.shareModuleName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="所属维度" width="200">
						<template slot-scope="scope">
							<span>{{ scope.row.taskModuleAttributeName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="收益用户" width="140">
						<template slot-scope="scope">
							<span>{{ scope.row.shareUserName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="收益用户等级" width="100">
						<template slot-scope="scope">
							<span>{{ scope.row.shareUserGrade }}</span>
						</template>
					</el-table-column>
					<el-table-column label="资产类别" width="100">
						<template slot-scope="scope">
							<span>{{ scope.row.moneyTypeName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="金额" width="100">
						<template slot-scope="scope">
							<span style="color: red;font-weight: bold;font-size: 16px;">{{ scope.row.amount }}</span>
						</template>
					</el-table-column>
					<el-table-column label="简介">
						<template slot-scope="scope">
							<span>{{ scope.row.intro }}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</x-border>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					ruleId: '',
					shareOrderId: ''
				},
				typeOption: '',
				selectList: '',
				tableData: [],
				tableFool: false,
				orderList: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.tableData = []
				var repones = await this.$ala.httpGet('Api/Type/GetKeyValue?type=TriggerType')
				this.typeOption = repones
				var select = await this.$ala.httpGet('Api/RewardRule/QueryList')
				this.selectList = select
				
				if (this.$route.query.id) {
					this.form.ruleId = this.$route.query.id
				}

				// 默认拿最新20条回来测试
				this.orderList = await this.$ala.httpGet(`Api/Reward/TestOrder?userName=${this.form.userName}`)

				// set default 1 item
				this.form.ruleId = this.selectList != null && this.selectList.length > 0 ? this.selectList[0].id : ''
				this.form.shareOrderId = this.orderList != null && this.orderList.length > 0 ? this.orderList[0].id : ''
			},
			async onSubmit() {
				var submiyRepones = await this.$ala.httpPost('Api/Reward/Test', this.form)
				if (submiyRepones) {
					this.$message({
						message: '执行成功',
						type: 'success'
					})
					this.tableData = submiyRepones
					this.tableFool = true
				}
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>